<template>
    <!-- pages/vip/vip.wxml -->
    <view>
        <!-- <custom-nav title="会员等级">
            <image slot="nav-bg" class="member-nav__bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/vip-bg.png"></image>
        </custom-nav> -->

        <view v-if="memberRuleList.length">
            <image class="vip-bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/vip-bg.png"></image>
            <view style="position: relative;padding-top:32rpx">
                <view class="instructions">
                   <text v-if="marketingMemberDetail.configAmount">消费{{ marketingMemberDetail.configAmount }}元获得{{ marketingMemberDetail.configIntegral }}消费积分</text>
                    <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/instruction.png" class="instructions_img"></image>
                </view>
                <view class="swiper">
                    <swiper previous-margin="33rpx" next-margin="33rpx" :circular="true" :current="current" @change="bindChange">
                        <block v-for="(item, index) in memberRuleList" :key="index">
                            <swiper-item id="swiperList" :item-id="item.level">
                                <block>
                                    <image :src="'http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/vip_bg' + (item.levelId - 1) + '.png'"></image>
                                    <view class="vip_name">
                                        <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/vip_hg.png" class="vip_name_icon"></image>
                                        <view class="vip_type">{{ item.levelName }}</view>
                                        <view class="vip_grade" v-if="marketingAllMemberInfo.userGrowthLevel == item.levelId">当前等级</view>
                                    </view>

                                    <view class="swiper-item__bottom flex-row-between">
                                        <view class="bottom-left">
                                            <view>
                                                累积
                                                <text>{{ marketingAllMemberInfo.integral }}积分</text>
                                            </view>
                                            <block>
                                                <view class="swiper-progress" v-if="marketingAllMemberInfo.userGrowthLevel == item.levelId">
                                                    <view class="swiper-progress__bg" :style="'width:' + item.progress + '%'"></view>
                                                </view>
                                                <view class="swiper-progress" v-else>
                                                    <view class="swiper-progress__bg"></view>
                                                </view>
                                                <view v-if="!(marketingAllMemberInfo.userGrowthLevel == item.levelId && index + 1 == memberRuleList.length)">
                                                    距离下一个级还需要
                                                    <text>{{ item.differenceIntegral }}积分</text>
                                                </view>
                                            </block>
                                        </view>

                                        <view class="bottom-right" v-if="marketingAllMemberInfo.userGrowthLevel == item.levelId && index + 1 == memberRuleList.length">
                                            <view>已经达到最高</view>
                                            <view>等级</view>
                                        </view>
                                        <view class="bottom-right" v-else>
                                            <view>下一级积分</view>
                                            <view>要求{{ item.nextLevelLowValue }}</view>
                                        </view>
                                    </view>
                                </block>
                            </swiper-item>
                        </block>
                    </swiper>
                </view>
                <!-- 新 -->
                <view class="vip__box">
                    <view class="box-head flex-row-start">
                        <view class="box-head__title">会员特权</view>
                        <!-- <view class="box-head__desc">奖励数量有限，送完即止</view> -->
                    </view>

                    <!-- hidden="{{!acMemberList.rewardAmount || !acMemberList.rewardAmount || !acMemberList.serveFreeTimes|| !acMemberList.serveDiscount}}" -->
                    <view class="card_wrap flex-row-start flex_wrap">
                        <view class="card_item flex-column-evenly" v-if="acMemberList.rewardIntegral">
                            <image class="bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/bg-2.png"></image>
                            <view class="title">{{ acMemberList.rewardIntegral }}分</view>
                            <view class="btns flex-row-center">
                                <image class="btn_frame" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/frame.png"></image>
                                <view>积分</view>
                            </view>
                        </view>
                        <view class="card_item flex-column-evenly" v-if="acMemberList.rewardAmount">
                            <image class="bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/bg-2.png"></image>
                            <view class="title">￥{{ acMemberList.rewardAmount }}</view>
                            <view class="btns flex-row-center">
                                <image class="btn_frame" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/frame.png"></image>
                                <view>奖励金</view>
                            </view>
                        </view>
                        <view class="card_item flex-column-evenly" v-if="acMemberList.serveFreeTimes">
                            <image class="bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/bg-2.png"></image>
                            <view class="title">{{ acMemberList.serveFreeTimes }}次</view>
                            <view class="btns flex-row-center">
                                <image class="btn_frame" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/frame.png"></image>
                                <view>免服务费次数</view>
                            </view>
                        </view>
                        <view class="card_item flex-column-evenly" v-if="acMemberList.servicePriceDiscount">
                            <image class="bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/bg-2.png"></image>
                            <view class="title">{{ acMemberList.servicePriceDiscount }}折</view>
                            <view class="btns flex-row-center">
                                <image class="btn_frame" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/frame.png"></image>
                                <view>服务费优惠</view>
                            </view>
                        </view>
                    </view>

                 <!--   <view class="box-discounts" v-if="acMemberList.marketCouponOptionApplies.length">
                        <view class="box-discounts__head flex-row-center">
                            <image class="head-bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/line_title.png"></image>
                            <view class="hig">优惠券x{{ acMemberList.couponLength }}，价值{{ acMemberList.allPrice }}元</view>
                        </view>

                        <view class="box-discounts__tickets flex-row-start flex_wrap">
                            <block v-for="(item_wrap, index) in acMemberList.marketCouponOptionApplies" :key="index">

                                <view class="tickets-item flex-column-start" v-for="(item, index1) in item_wrap.totalReceiveCount" :key="index1">
                                    <image class="tickets-item__bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/hongbao_bg.png"></image>

                                    <view class="tickets-item__title flex-row-center" v-if="item_wrap.couponType == 1">服务费券</view>

                                    <view class="tickets-item__title flex-row-center" v-if="item_wrap.couponType == 2">电费券</view>

                                    <view class="tickets-item__title flex-row-center" v-if="item_wrap.couponType == 3">现金券</view>

                                    <view class="tickets-item__num">
                                        <text>￥</text>
                                        {{ item_wrap.amount }}
                                    </view>

                                    <view class="tickets-item__desc">满{{ item_wrap.couponAmount }}可用</view>
                                </view>
                            </block>
                        </view>
                    </view> -->
					
                </view>

                <view class="vip__box">
                    <view class="box-head flex-row-start bb">
                        <view class="box-head__title">权益说明</view>
                    </view>

                    <view class="box-describe">
                        <view>1.服务费优惠：付费会员期间，可享受服务费折扣</view>
                        <view>2.奖励金：虚拟金额，可抵扣服务费，不可提现</view>
                        <view>3.免服务费次数：可全额减免服务</view>
                        <view>4.积分：积分与成长等级会员关联，可享受成长等级会员权益</view>
                        <view>5.优惠券：可用于订单金额减免</view>
                    </view>
                </view>
            </view>
        </view>
        <view v-else>
            <!-- <nav txtColor='#18181A' image='http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/static/back.png' title='会员等级' show_bol='{{false}}'></nav> -->
            <Upgrading text="暂无内容"></Upgrading>
        </view>
    </view>
</template>

<script lang="ts">
// import zpMixins from '@/uni_modules/zp-mixins/index';
// import nav from '../../../components/nav/nav';
import Upgrading from '../../../components/upgrading/upgrading';
// import vanNavBar from './@vant/weapp/nav-bar/index';
// import vanIcon from './@vant/weapp/icon/index';
// import customNav from '../../../components/custom-nav/index';
import { getServicePackage, getMemberGradeRule } from '../../../api/https';
import { getMemberRuleList, getMarketingMemberInfo1, getMarketingMemberDetail, getMarketingAllMemberInfo } from '../../../api/marketing/marketing';
export default {
    components: {
        // nav,
        Upgrading,
        // vanNavBar,
        // vanIcon,
        // customNav
    },
    data() {
        return {
            bar_Height: uni.getSystemInfoSync().statusBarHeight,
            widnowH: uni.getSystemInfoSync().screenHeight,
            vipList: [],
            current: 0,
            equivalentIntegral: null,
            consumeMoney: null,

            // 会员列表
            memberRuleList: [],

            // 选中的会员列表对象
            acMemberList: {
                rewardIntegral: '',
                rewardAmount: '',
                serveFreeTimes: '',
                serveDiscount: '',
                marketCouponOptionApplies: [],
                couponLength: '',
                allPrice: ''
            },

            // 会员信息
            marketingMemberInfo: {},

            //
            marketingAllMemberInfo: {
                userGrowthLevel: '',
                integral: ''
            },

            marketingMemberDetail: {
                configAmount: '',
                configIntegral: ''
            }
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function () {
        this.servicePackage();
        this.memberGradeRule();
        this.getMarketingMemberDetail();
        this.getMarketingMemberInfo1();
        this.getMarketingAllMemberInfo();
    },
    methods: {
        // 获取所有会员信息
        async getMarketingAllMemberInfo() {
            try {
                let res = await getMarketingAllMemberInfo({
                    plUserId: uni.getStorageSync('memberId')
                });
                let marketingAllMemberInfo = res.data || {};
                this.setData({
                    marketingAllMemberInfo
                });
                this.getMemberRuleList();
            } catch (error) {}
        },

        async getMarketingMemberDetail() {
			console.log('执行')
            try {
                let res = await getMarketingMemberDetail({
                    sellerId: getApp().globalData.sellerId
                });
				console.log(res,'这是啥了')
                this.setData({
                    marketingMemberDetail: res.data || {}
                });
            } catch (error) {}
        },

        getMemberRuleList() {
            getMemberRuleList().then((res: any) => {
                let list = res.data || [];
                let marketingAllMemberInfo = this.marketingAllMemberInfo;
                let current = 0;
                list.forEach((item: any, index: any) => {
                    //   设置进度条展示
                    item.progress = ((marketingAllMemberInfo.integral || 0) / item.levelHighValue) * 100;
                    if (item.progress >= 100) {
                        item.progress = 100;
                    }
                    // 获取等级积分区间的最大值加1  ，得到下一等级要求
                    item.nextLevelLowValue = item.levelHighValue + 1;
                    // 设置距离下一个等级还查多少积分
                    // 初始化值
                    item.differenceIntegral = 0;
                    item.differenceIntegral = item.nextLevelLowValue - (marketingAllMemberInfo.integral || 0);
                    if (item.differenceIntegral < 0) {
                        item.differenceIntegral = 0;
                    }

                    // 设置当前选中那个卡片
                    if (this.marketingAllMemberInfo.userGrowthLevelName == item.levelName) {
                        current = index;
                    }
                    if (item.marketCouponOptionApplies) {
                        item.allPrice = item.marketCouponOptionApplies.reduce((total: number, item: any) => {
                            return total + Number(item.amount * item.totalReceiveCount);
                        }, 0);
                        item.allPrice = item.allPrice.toFixed(2);
                        item.couponLength = item.marketCouponOptionApplies.reduce((total: number, item: any) => {
                            return total + Number(item.totalReceiveCount);
                        }, 0);
                        item.couponLength = item.couponLength.toFixed();
                    }
                });
                if (list.length) {
                    //服务费折扣处理
                    list.forEach((element) => {
                        element.serveDiscount = ((element.serveDiscount * 100) / 10).toFixed(1);
                    });
                    let index = marketingAllMemberInfo.userGrowthLevel ? marketingAllMemberInfo.userGrowthLevel - 1 : 0;
                    this.setData({
                        acMemberList: list[index]
                    });
                }
                this.setData({
                    memberRuleList: list,
                    current
                });
                console.log(this.memberRuleList, 'liebiao');
            });
        },

        getMarketingMemberInfo1() {
            getMarketingMemberInfo1({
                plUserId: uni.getStorageSync('memberId')
            }).then((res: any) => {
                console.log(res, '会员信息');
                this.setData({
                    marketingMemberInfo: res.data || {}
                });
            });
        },

        servicePackage() {
            const tmp = this;
            getServicePackage({})
                .then((res: any) => {
                    if (res.code == 0) {
                        tmp.setData({
                            vipList: res.data
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },

        bindChange(e: any) {
            const {
                detail: { current }
            } = e;
            this.setData({
                current,
                acMemberList: this.memberRuleList[current]
            });
        },

        memberGradeRule() {
            const tmp = this;
            getMemberGradeRule({})
                .then((res: any) => {
                    if (res.code == 0) {
                        if (res.data.integralConfig.content.length) {
                            tmp.setData({
                                consumeMoney: res.data.integralConfig.consumeMoney,
                                equivalentIntegral: res.data.integralConfig.equivalentIntegral
                            });
                        }
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        }
    }
}
</script>

<style lang="less">
	@import "../../../commin/flex.less";
/* pages/vip/vip.wxss */

    page {
	    background: #f5f7fa;
	    padding-bottom: 100rpx;
	}
	.vip-bg {
	    position: fixed;
	    width: 100vw;
	    height: 628rpx;
		--tt: 30px;
	    top: -50px;
	    left: 0;
	}

.member-nav-height {
    height: 170rpx;
}
.member-nav {
    position: fixed;
    z-index: 300;
    top: 0;
    left: 0;
    width: 100%;
    height: 170rpx;
    background-color: #222426;
    overflow: hidden;
}
.member-nav__box {
    background: transparent !important;
}
.member-nav__arrow {
    color: #fff;
    font-size: 40rpx !important;
    margin-left: -10rpx;
}
.member-nav__title {
    color: #fff;
    font-weight: bold;
}
.member-nav__bg {
    position: absolute;
    width: 100vw;
    height: 628rpx;
    top: 0;
    left: 0;
    z-index: -1;
}

.header_bg {
    width: 150vw;
    height: 180vw;
    background: linear-gradient(-45deg, #353a47, #596372);
    background: #505967;
    border-radius: 50%;
    position: fixed;
    top: -63vh;
    left: -25%;
    z-index: -1;
}
.swiper {
    width: 100vw;
    height: 294rpx;
    margin-top: 0rpx;
    margin-bottom: 20rpx;
}
.swiper .swiper-item__bottom {
    line-height: 1;
    position: absolute;
    top: 110rpx;
    width: 500rpx;
    left: 127rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #c0c4cc;
    height: 150rpx;
}
.swiper .swiper-item__bottom .bottom-left text {
    color: #ffffff;
}
.swiper .swiper-item__bottom .bottom-right {
    font-size: 24rpx;
    font-weight: 500;
    color: #c0c4cc;
    line-height: 1.2;
}
.swiper .swiper-item__bottom .swiper-progress {
    width: 320rpx;
    height: 12rpx;
    margin: 20rpx 0;
    background: #4c5158;
    border-radius: 6rpx;
}
.swiper .swiper-item__bottom .swiper-progress__bg {
    width: 70%;
    height: 12rpx;
    background: linear-gradient(90deg, #8d95a3, #d3dbeb);
    border-radius: 6rpx;
}
.dfsaf {
    width: 685rpx;
    height: 294rpx;
    background-color: red;
}
swiper {
    width: 100%;
    height: 100%;
}
.my_privilege {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #303133;
    margin-left: 40rpx;
    margin-bottom: 31rpx;
}
/* .privilege_item{
  width: 100%;   
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: red;
} */
.privilege_list {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.privilege_list_item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.privilege_icon {
    width: 100rpx;
    height: 100rpx;
}
.privilege_name {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #606266;
    margin-top: 10rpx;
}
.copy_right {
    position: fixed;
    bottom: 36rpx;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #909399;
}
.instructions {
    top: 20rpx;
    right: 39rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #c0c4cc;
    z-index: 999;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 39rpx;
    margin-bottom: 20rpx;
}
.instructions_img {
    width: 30rpx;
    height: 30rpx;
    margin-left: 9rpx;
}
swiper-item > image {
    width: 685rpx;
    height: 300rpx;
}
.vip_name {
    position: absolute;
    top: 44rpx;
    left: 70rpx;
    font-size: 34rpx;
    color: #ffffff;
    display: flex;
    justify-content: start;
    align-items: center;
}
.vip_type {
    font-size: 42rpx;
    font-family: PingFang SC;
    font-weight: bold;
    margin: 0 24rpx;
    color: #ffffff;
}
.vip_grade {
    width: 128rpx;
    height: 42rpx;
    border-radius: 21rpx;
    font-size: 24rpx;
    line-height: 42rpx;
    text-align: center;
    font-family: PingFang SC;
    font-weight: 500;
    color: #c0c4cc;
    border: 1rpx solid #c0c4cc;
}
.vip_name_icon {
    width: 40rpx;
    height: 35rpx;
}
.vip_time {
    position: absolute;
    top: 143rpx;
    left: 120rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #d1836e;
}
.progress {
    width: 100%;
    position: absolute;
    top: 207rpx;
    left: 120rpx;
    width: 350rpx;
    height: 12rpx;
    background: linear-gradient(90deg, #f5f6fa, #f0f0f0);
    border-radius: 6rpx;
}
.progress_nums {
    position: absolute;
    top: 260rpx;
    left: 120rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
}
.progress_nums:nth-child(5) {
    color: #999999;
}
.progress_nums_text {
    font-size: 26rpx;
    color: #b34e32;
    margin: 0 5rpx;
}
.progress-box {
    width: 100%;
}
.vip_integral {
    position: absolute;
    top: 130rpx;
    left: 60rpx;
    font-size: 24rpx;
    color: #ffffff;
}
.discount {
    width: 560rpx;
    font-size: 26rpx;
    position: absolute;
    top: 260rpx;
    left: 50rpx;
    display: flex;
    flex-wrap: wrap;
}
.discount > view {
    width: 280rpx;
    height: 50rpx;
    color: #e5e6ed;
    overflow: hidden;
    position: relative;
}
.discount > view > image {
    width: 35rpx;
    height: 35rpx;
    margin: 7rpx 20rpx 0 0;
    float: left;
}
.discount > view > text {
    display: block;
    height: 50rpx;
    line-height: 50rpx;
    float: left;
}
.vip_details {
    width: 90vw;
    height: 400rpx;
    background: #ffffff;
    margin: auto;
    border-radius: 15rpx;
    overflow: hidden;
    position: relative;
}
.VDetalis_head {
    width: 85vw;
    height: 80rpx;
    padding: 0 0 0 5vw;
    background: #e5e6ed;
    line-height: 80rpx;
    color: #3e3630;
    font-size: 24rpx;
}
.progressBar {
    width: 80vw;
    height: 170rpx;
    margin: 0 auto;
    position: relative;
}
.progressBarB {
    width: 12%;
    margin: 50rpx 0 0 0;
    position: absolute;
    left: -35rpx;
}
.progressBar_n {
    display: block;
    width: 100%;
    height: 30rpx;
    line-height: 30rpx;
    border-radius: 8rpx;
    text-align: center;
    background: #fac600;
    margin: 0 auto;
    color: #ffffff;
    font-size: 22rpx;
}
.progressBar_nx {
    display: block;
    width: 2rpx;
    height: 40rpx;
    background: #fac600;
    margin: 0 auto;
}
.progressBar_x {
    width: 80vw;
    height: 4rpx;
    position: absolute;
    bottom: 45rpx;
}
.progressBar_x:after {
    clear: both;
    content: '';
    display: block;
    width: 0;
    height: 0;
    visibility: hidden;
}
.progressBar_white {
    width: 77vw;
    height: 4rpx;
    background: #dedede;
    float: left;
}
.progressBar_yellow {
    /* width: 10vw; */
    height: 4rpx;
    background: #fac600;
}
.progressBar_circular {
    width: 2vw;
    height: 2vw;
    margin: -1vw 0 0 0;
    border: 0.5vw solid #dedede;
    border-radius: 50%;
    float: right;
}
.progressBar_start,
.progressBar_end {
    display: block;
    margin-top: 11.5vh;
    color: #757575;
    font-size: 24rpx;
}
.progressBar_start {
    float: left;
}
.progressBar_end {
    float: right;
    margin-right: -1vh;
}
.upgrade {
    width: 100%;
    border-top: 1px solid #efefef;
}
.upgrade > text,
.upgrade > view {
    display: block;
    width: 100%;
    height: 50rpx;
    text-align: center;
    line-height: 50rpx;
    color: #ababab;
    font-size: 24rpx;
}
.upgrade > view {
    font-size: 28rpx;
    line-height: 40rpx;
}
.cardSilverColor {
    color: #4c4c4c;
}
.cardGoldColor {
    color: #bf9849;
}
.cardPlatinumColor {
    color: #956355;
}
.cardMasonryColor {
    color: #4c4674;
}
.cardBlackColor {
    color: #c2c7cd;
}
.cardGradeBorder1 {
    border: 1rpx solid #6e6e6e;
    color: #6e6e6e;
}
.cardGradeBorder2 {
    border: 1rpx solid #bf9849;
    color: #bf9849;
}
.cardGradeBorder3 {
    border: 1rpx solid #956355;
    color: #956355;
}
.cardGradeBorder4 {
    border: 1rpx solid #4c4674;
    color: #4c4674;
}
.cardGradeBorder5 {
    border: 1rpx solid #c2c7cd;
    color: #c2c7cd;
}
.timeColor1 {
    color: #6e6e6e;
}
.timeColor2 {
    color: #c39d52;
}
.timeColor3 {
    color: #d1836e;
}
.timeColor4 {
    color: #9188d3;
}
.timeColor5 {
    color: #798289;
}
.integralColor1 {
    color: #4c4c4c;
}
.integralColor2 {
    color: #b38832;
}
.integralColor3 {
    color: #b34e32;
}
.integralColor4 {
    color: #333366;
}
.integralColor5 {
    color: #c2c7cd;
}
.privilege_list-item {
    position: relative;
}
.privilege_list-item2 {
    position: relative;
}
.privilege_list-item3 {
    position: relative;
}
.badge {
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(70%);
    padding: 6rpx 13rpx;
    background: #f7a14a;
    border-radius: 16rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
}
.vip__box {
    background: linear-gradient(0deg, #ffffff, #f4f6f8);
    border: 2rpx solid #ffffff;
    box-shadow: 4rpx 7rpx 20rpx 0px rgba(166, 171, 179, 0.24);
    border-radius: 16rpx;
    margin: 0 24rpx;
    padding: 0 32rpx;
    margin-bottom: 16rpx;
}
.vip__box .box-head {
    height: 100rpx;
    margin-bottom: 9rpx;
}
.vip__box .box-head.bb {
    border-bottom: 1px solid #dcdfe6;
}
.vip__box .box-head__title {
    font-size: 30rpx;
    font-weight: bold;
    color: #303133;
    margin-right: 33rpx;
}
.vip__box .box-head__desc {
    font-size: 26rpx;
    color: #909399;
}
.vip__box .card_wrap {
    margin-bottom: 20rpx;
}
.vip__box .card_wrap .card_item {
    position: relative;
    width: 202rpx;
    height: 192rpx;
    z-index: 1;
    margin-right: 15rpx;
    margin-bottom: 24rpx;
}
.vip__box .card_wrap .card_item:nth-child(3) {
    margin-right: 0;
}
.vip__box .card_wrap .card_item .bg {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
}
.vip__box .card_wrap .card_item .title {
    font-size: 30rpx;
    font-weight: bold;
    color: #fc724c;
    line-height: 40rpx;
}
.vip__box .card_wrap .card_item .btns {
    position: relative;
    width: 182rpx;
    height: 65rpx;
    font-size: 22rpx;
    font-weight: 500;
    color: #a14b20;
}
.vip__box .card_wrap .card_item .btns .btn_frame {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
.vip__box .link-img {
    width: 695rpx;
    height: 25rpx;
    margin: 32rpx -32rpx;
}
.vip__box .box-discounts .hig {
    font-weight: bold;
    color: #ae865c;
}
.vip__box .box-discounts__head {
    position: relative;
    height: 101rpx;
    z-index: 1;
    padding: 0 32rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #606266;
}
.vip__box .box-discounts__head .head-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
}
.vip__box .box-discounts__tickets {
    width: 630rpx;
    margin: 0 auto;
    background: #fdf1e5;
    border-radius: 10rpx;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: -24rpx;
    padding: 60rpx 46rpx 20rpx;
    box-sizing: border-box;
}
.vip__box .box-discounts__tickets .tickets-item {
    width: 137rpx;
    height: 142rpx;
    position: relative;
    z-index: 1;
    line-height: 1;
    margin-right: 60rpx;
    margin-bottom: 33rpx;
}
.vip__box .box-discounts__tickets .tickets-item:nth-child(3n) {
    margin-right: 0;
}
.vip__box .box-discounts__tickets .tickets-item__bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.vip__box .box-discounts__tickets .tickets-item__title {
    font-size: 18rpx;
    color: #a26d35;
    padding-top: 8rpx;
    margin-bottom: 20rpx;
}
.vip__box .box-discounts__tickets .tickets-item__num {
    font-weight: bold;
    color: #f0703e;
    font-size: 36rpx;
    margin-bottom: 25rpx;
}
.vip__box .box-discounts__tickets .tickets-item__num text {
    font-size: 22rpx;
}
.vip__box .box-discounts__tickets .tickets-item__desc {
    font-size: 22rpx;
    color: #fad9b1;
}
.vip__box .box-describe {
    padding: 32rpx 0;
    font-size: 24rpx;
    color: #909399;
    line-height: 36rpx;
}
</style>
